<template>
  <div class="UserMessage">
    <div v-if="isif" class="UserTop">
      <!-- 搜索 -->
      模板名称：
      <el-input
        size="mini"
        style="width: 200px"
        v-model="input"
        placeholder="请输入模版名称"
      ></el-input>
      <el-button
        size="mini"
        style="margin: 0 20px"
        type="primary"
        @click="GetList"
        >搜索</el-button
      >
      <el-button
        size="mini"
        style="margin: 0 10px"
        type="info"
        @click="FunClose"
        >清空</el-button
      >
    </div>
    <div style="margin: 20px 0; display: flex; justify-content: space-between">
      <div>
        <el-button
          size="mini"
          @click="AddModal"
          style="margin: 0 10px"
          type="primary"
          >添加留言</el-button
        >
        <el-button
          :disabled="NumberNum == 0"
          @click="delall"
          size="mini"
          style="margin: 0 10px"
          type="success"
          >批量删除</el-button
        >
      </div>
      <div><i @click="isif = !isif" class="el-icon-coin"></i></div>
    </div>
    <div class="tabclose">
      <el-tag style="margin-bottom: 20px"
        >当前表格选择项 {{ NumberNum }}
        <span @click="toggleSelection()">清空</span></el-tag
      >
    </div>
    <div class="UserMain">
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(245, 247, 250,0.5)"
        :data="tableData"
        border
        style="width: 100%"
        tooltip-effect="dark"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" prop="transName" label="模版名称">
        </el-table-column>

        <el-table-column align="center" label="操作" width="380">
          <template v-slot="{ row }">
            <el-button type="primary" @click="EditModal(row)">修改</el-button>
            <el-button @click="Delete(row.transportId)" type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </p>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <component
        v-if="dialogVisible"
        :is="SonComName"
        :currentRow="currentRow"
        @modalCancelEmit="dialogVisible = false"
        @modalSaveEmit="modalSaveEmit"
      ></component>
    </el-dialog>
    <!-- 模态框 -->
  </div>
</template>

<script>
import axios from 'axios'
import Token from '@/api/headers'
import { ListModel } from './config'
import { editModal, addModal } from './components/index'
export default {
  components: {
    addModal,
    editModal
  },
  data() {
    return {
      NumberId: [],
      NumberNum: 0,
      input: '', //搜索框
      loading: false, //加载

      tableData: [], //表格
      isif: true,
      // 模态框
      dialogVisible: false,
      dialogTitle: '',
      dialogWidth: '50%',
      SonComName: '', //子页面名称切换
      currentRow: 1, //父传子
      // 模态框

      // 分页
      rows: 10, //每页几条
      page: 1, //第几页
      total: null, //分页总数
      currentPage: 1 //默认第一页
      // 分页
    }
  },
  methods: {
    // 多选
    toggleSelection(rows) {
      // console.log(rows)

      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (val) {
        this.NumberId = []
        for (let value of val) {
          this.NumberId.push(value.transportId)
        }
      }
      console.log(val)
      this.NumberNum = val.length
      console.log(this.NumberId, '000fff0')
    },
    // 多选
    // 子组件保存成功后回调
    modalSaveEmit() {
      this.dialogVisible = false //关闭模态框
      this.GetList() //重新加载数据
    },
    //打开Modal方法
    openDialog(modal) {
      this.dialogTitle = modal.Title
      this.dialogWidth = modal.Width
      this.SonComName = modal.Type
      this.dialogVisible = true
    },

    AddModal() {
      this.currentRow = 123 //父传子
      this.openDialog(ListModel.Add)
      console.log(ListModel.Add)
    },
    EditModal(id) {
      console.log(id.transportId)

      this.currentRow = id.transportId //编辑传递id

      this.openDialog(ListModel.Edit)
      console.log(ListModel.Edit)
    },

    Delete(i) {
      console.log(i, '00000')
      var arr = []
      arr.push(i)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 调用接口
          axios
            .delete('http://47.104.167.34:9305/apis/shop/transport', {
              data: arr,
              ...Token
            })
            .then((response) => {
              console.log(response)
              this.GetList()
            })
            .catch((error) => {
              console.log(error)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //批量删除
    delall() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 调用接口
          axios
            .delete('http://47.104.167.34:9305/apis/shop/transport', {
              data: this.NumberId,
              ...Token
            })
            .then((response) => {
              console.log(response)
              this.GetList()
            })
            .catch((error) => {
              console.log(error)
            })
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //批量删除
    //默认调用
    GetList() {
      this.loading = true

      // get请求
      axios
        .get('http://47.104.167.34:9305/apis/shop/transport/page', {
          params: {
            current: this.page,
            size: this.rows,
            transName: this.input,
            t: Date.now()
          },
          ...Token
        })
        .then((response) => {
          console.log(response.data.data)
          this.total = response.data.data.total
          this.tableData = response.data.data.records
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    FunClose() {
      this.input = ''
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.rows = val
      this.GetList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.GetList()
    }
    // 分页
  },
  mounted() {
    this.GetList()
  }
}
</script>

<style lang="scss" scoped>
.UserMessage::v-deep {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .UserTop {
    margin-bottom: 20px;
  }

  .is-leaf {
    text-align: center;
  }

  .el-table__cell {
    text-align: center;
  }

  // background: bisque;
}
</style>